<template>
  <div class="app-service" id="app-service">
    <div class="app-service__navbar-wrapper">
      <service-navbar></service-navbar>
    </div>
    <div class="app-service__center-wrapper" id="app-service-center-wrapper">
      <service-center></service-center>
    </div>
    <t-background></t-background>
    <t-background-exchange></t-background-exchange>
  </div>
</template>

<script>
  import tBackground from '@/components/background';
  import tBackgroundExchange from '@/components/background-exchange';
  import serviceNavbar from '@/app/service/navbar';
  import serviceCenter from '@/app/service/center';
  import optimalServiceHeight from '@/app/utils/optimalServiceHeight';

  export default {
    name: 'app-service',
    components: {
      serviceNavbar,
      serviceCenter,
      tBackground,
      tBackgroundExchange,
    },
    created() {
      this.$eventHub.$on('resize', () => {
        this.optimal();
      });
      this.$eventHub.$on('logout', () => {
        this.$destroy();
      });
    },
    mounted() {
      this.optimal();
    },
    activated() {
      this.optimal();
    },
    methods: {
      optimal() {
        this.$nextTick(() => {
          if (/^\/service/i.test(this.$route.path)) {
            optimalServiceHeight.run();
          }
        });
      },
    },
  };
</script>